<template>
  <view class="my-page">
    <!-- 顶部用户信息区域 -->
    <view class="user-info-container">
      <image 
        class="avatar" 
        src="/static/板栗.png" 
        mode="widthFix"
      ></image>
      <view class="user-info">
        <text class="username">用户名: admin</text>
      </view>
      <navigator url="/pages/mine/personal-info" class="edit-btn">
        <view class="ge">个人信息</view> 
		<view><image src="/static/我的/向右白.png" class="arrow-img"></image> </view>
      </navigator>
    </view>

    <!-- 功能快捷入口 -->
    <view class="quick-functions">
      <view class="function-item" v-for="(item, index) in quickFunctions" :key="index">
        <navigator :url="item.url" class="function-link">
          <view class="function-icon" :style="{ backgroundColor: item.color || '#f0f0f0' }">
            <image :src="item.icon" class="icon-img" mode="widthFix"></image>
          </view>
          <text class="function-name">{{ item.name }}</text>
        </navigator>
      </view>
    </view>

    <!-- 功能列表：自适应宽度 -->
    <view class="function-list">
      <view class="list-item" v-for="(item, index) in functionList" :key="index">
        <navigator :url="item.url" class="list-link">
          <text class="item-name">{{ item.name }}</text>
          <image src="/static/底部/向右1.png" class="arrow-img" mode="widthFix"></image>
        </navigator>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 2,
      quickFunctions: [
        {
          name: "我的顶单",
          icon: "/static/我的/订单集合.png",
          url: "/pages/mine/chat-group",
          
        },
        {
          name: "在线客服",
          icon: "/static/icons/service.png",
          color: "#40a9ff",
          url: "/pages/mine/service"
        },
        {
          name: "反馈社区",
          icon: "/static/icons/feedback.png",
          color: "#b771ff",
          url: "/pages/mine/feedback"
        },
        {
          name: "点赞我们",
          icon: "/static/icons/like.png",
          color: "#722ed1",
          url: "/pages/mine/like"
        }
      ],
      functionList: [
        { name: "编辑资料", url: "/pages/mine/edit-info" },
        { name: "常见问题", url: "/pages/mine/faq" },
        { name: "关于我们", url: "/pages/mine/about" },
        { name: "应用设置", url: "/pages/mine/settings" }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.my-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
  width: 100vw;
  box-sizing: border-box;
}

/* 用户信息区域 */
.user-info-container {
  background-color: #1677ff;
  padding: 60rpx 30rpx 40rpx;
  display: flex;
  align-items: center;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  margin-right: 30rpx;
  background-color: #fff;
  object-fit: cover; // 补充图片裁剪规则
}

.user-info {
  flex: 1;
  .username {
    font-size: 34rpx;
    font-weight: 500;
  }
}

.edit-btn {
  color: #fff;
  font-size: 28rpx;
  opacity: 0.9;
  display: flex;
  justify-content: center;

	
	.ge{
		margin: 0rpx 20rpx;
	}
}

/* 快捷功能区域 - 修复图标错位 */
.quick-functions {
  display: flex;
  padding: 30rpx 23rpx;
  background-color: #fff;
  margin: 20rpx 0;
  border-radius: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.function-item {
  flex: 1;
  text-align: center;
}

.function-link {
  display: flex;
  flex-direction: column; // 纵向排列图标和文字
  justify-content: center;
  align-items: center;
  width: 100%; // 占满父容器
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  color: #fff;
  font-size: 40rpx;
}

.icon-img {
  width: 50rpx;
  height: 50rpx;
  object-fit: contain;
}

.function-name {
  font-size: 26rpx;
  color: #333;
}

/* 功能列表 - 修复箭头错位 */
.function-list {
  background-color: #fff;
  margin-bottom: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.list-item {
  border-bottom: 1rpx solid #f1f1f1;
  width: 100%;
}

/* 强制flex布局，确保箭头右对齐 */
.list-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  padding: 20rpx 30rpx !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* 兼容微信小程序navigator标签默认样式 */
  display: block;
  display: flex;
}

.item-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 900;
}

/* 箭头自适应右对齐 */
.arrow-img {
  width: 28rpx;
  height: 28rpx;
  object-fit: contain;
}

/* 底部导航（如果需要在当前页面显示） */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  width: 100%;
  z-index: 999;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.iconfont {
  font-size: 36rpx;
  margin-bottom: 5rpx;
}

.tab-text {
  font-size: 24rpx;
}

.tab-item.active {
  color: #1677ff;
}
</style>